<template>
	<view class="waterfall">
		<uv-sticky>
			<view style="padding: 10rpx 0;background-color: #fff;">
				<uv-tabs  @click="tabClick" keyName='categoryName' lineWidth="50" lineColor="#6ECEB0" :list="list" ></uv-tabs>
			</view>
		</uv-sticky>
		<uv-list>
			<uv-list-item>
				<uv-line></uv-line>
			</uv-list-item>
			<uv-list-item class="waterfall-item" v-for="(item, index) in indexList" :key="index">
				<view @click="toDetail(item)" class="items">
					<uv-image radius='3' :src="item.image" width="140px" height="100px"></uv-image>
					<view class="content">
						<view class="title">
							{{item.roomName}}
						</view>
						<view class="catggory">
							<span>{{item.floorName}}</span><span style='padding-left: 10rpx;'>{{item.area}}区</span>
						</view>
						<view class="seat">
							<span>共</span><span style='color:#6ECEB0'>{{item.numX * item.numY}}</span><span>座,剩</span><span style='color:#FF7670'>{{item.hasTotal}}</span><span>座</span>
						</view>
					</view>
				</view>
				<uv-line></uv-line>
			</uv-list-item>
		</uv-list>
		<uv-load-more  @loadmore='loadmore' :status="loadStatus"></uv-load-more>
	</view>
</template>
<script setup>
	import {
		ref
	} from 'vue';
	import {
		random
	} from '@/uni_modules/uv-ui-tools/libs/function/index.js'
	import {
		onLoad,
		onReachBottom
	} from '@dcloudio/uni-app'
	import {getIndexCategoryApi,getIndexListApi} from '../../api/index.js'
	const list = ref([])
	const indexList = ref([])
	const loadStatus = ref('loadmore')
	const currentPage = ref(1)
	const pageSize = ref(6)
	const categoryId = ref('')
	const pages = ref(0)
	//跳转预订
	const toDetail = (item)=>{
		uni.navigateTo({
			url:'../index_detail/index_detail?item='+JSON.stringify(item)
		})
	}
	//获取分类数据
	const getIndexCategory = async()=>{
		let res = await getIndexCategoryApi()
		if(res && res.code == 200){
			list.value = res.data;
			console.log(list.value)
			list.value.unshift({
				categoryId: '',
				categoryName: "全部",
				orderNum: ''
			})
		}
	}
	//列表调用
	const getIndexList = async()=>{
		let res = await getIndexListApi({
			currentPage:currentPage.value,
			pageSize:pageSize.value,
			categoryId:categoryId.value
		})
		if(res && res.code == 200){
			pages.value = res.data.pages;
			indexList.value = indexList.value.concat(res.data.records)
			if(currentPage.value >= pages.value){
				loadStatus.value = 'nomore'
			}else{
				loadStatus.value = 'loadmore'
			}
			console.log(indexList.value)
		}
		
	}
	//加载更多
	const loadmore = ()=>{
		if(currentPage.value >= pages.value){
			loadStatus.value = 'nomore'
			return;
		}
		loadStatus.value = 'loading'
		//页数加1
		currentPage.value = ++currentPage.value;
		getIndexList()
	}
	//选项卡点击事件
	const tabClick = (item)=>{
		console.log(item)
		indexList.value = [];
		currentPage.value = 1;
		categoryId.value = item.categoryId
		//获取列表数据
		getIndexList()
	}
	onReachBottom(() => {
		console.log('触底加载')
		if(currentPage.value >= pages.value){
			loadStatus.value = 'nomore'
			return;
		}
		loadStatus.value = 'loading'
		//页数加1
		currentPage.value = ++currentPage.value;
		getIndexList()
	})
	onLoad(() => {
		console.log('44444444')
		// loadmore()
		getIndexCategory()
		getIndexList()
	})
</script>

<style scoped lang="scss">
	.waterfall {
		background-color: #f1f1f1;
	}
	.waterfall-item {
		overflow: hidden;
		margin-top: 10px;
		border-radius: 6px;
		padding: 0px 20rpx;
	}
	:deep(.uv-list){
		padding: 0px 25rpx;
	}
	.items{
		display: flex;
		padding: 20rpx 0rpx;
		.content{
			padding: 0rpx 15rpx;
			.title{
				color: #303133;
				font-size: 32rpx;
				font-weight: 600;
			}
			.catggory{
				color: #606266;
				font-size: 28rpx;
				padding: 15rpx 0rpx;
			}
			.seat{
				color: #606266;
				font-size: 28rpx;
			}
		}
	}
</style>
